<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 🔥 跨域策略：完全放开所有跨域限制 -->
    <!-- 注意：CSP meta标签在某些Android WebView中可能导致问题，所以简化配置 -->
    <meta http-equiv="Content-Security-Policy" content="default-src * data: blob: 'unsafe-inline' 'unsafe-eval';">
    <title>食物搜索</title>
    <link rel="stylesheet" href="./css/sousuo.css">
    
    <!-- 🔥 关键修复：在head中直接加载Vue.js（与原始版本相同） -->
    <script src="./js/vue.js"></script>
    <script>
        // 🔍 调试：检查Vue是否加载成功
        if (typeof Vue !== 'undefined') {
            console.log('✅ Vue.js 加载成功，版本:', Vue.version || 'unknown');
        } else {
            console.error('❌ Vue.js 加载失败！');
            document.addEventListener('DOMContentLoaded', function() {
                document.body.innerHTML = '<div style="padding: 20px; color: red; font-size: 18px; text-align: center;">' +
                    '<h2>❌ Vue.js 加载失败</h2>' +
                    '<p>JavaScript 文件路径可能有误</p>' +
                    '<p>请检查 assets/ai-html/js/vue.js 是否存在</p>' +
                    '</div>';
            });
        }
    </script>
    <style>
        /* Logo区域样式 */
        .logo-container {
            text-align: center;
            margin-bottom: 15px;
            transition: all 0.3s ease;
            height: 120px;
            opacity: 1;
        }
        
        .logo-container img {
            max-height: 100%;
            max-width: 80%;
        }
        
        /* 当搜索框激活时，Logo上移并消失 */
        .search-container.active + .logo-container {
            transform: translateY(-100px);
            opacity: 0;
            height: 0;
            margin: 0;
        }
        .logo-container.hidden {
            opacity: 0;
        }
        /* 修改容器顺序，让搜索框显示在logo后面 */
        .container {
            display: flex;
            flex-direction: column;
        }

        /* 音频识别相关样式 */
        .voice-recognition-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: all 0.3s ease;
        }

        .voice-recognition-overlay.active {
            display: flex;
        }

        .voice-recognition-box {
            background: white; /* 改为白色背景 */
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            color: #333; /* 将文字颜色改为深色以保持对比度 */
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            max-width: 300px;
            width: 90%;
            animation: slideInScale 0.4s ease-out;
        }

        @keyframes slideInScale {
            0% {
                opacity: 0;
                transform: scale(0.8) translateY(30px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .voice-icon-container {
            position: relative;
            margin-bottom: 20px;
        }

        .voice-icon {
            width: 100px;
            height: 100px;
            /* background: rgba(255, 255, 255, 0.2); */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
            margin: 0 auto;
            position: relative;
            backdrop-filter: blur(10px);
            animation: heartBeat 1.5s ease-in-out infinite;
        }

        /* 波纹动画 */
        .voice-wave {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.6);
            animation: voiceWave 2s infinite ease-out;
        }

        .voice-wave:nth-child(2) {
            animation-delay: 0.5s;
        }

        .voice-wave:nth-child(3) {
            animation-delay: 1s;
        }

        @keyframes voiceWave {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            100% {
                transform: scale(2);
                opacity: 0;
            }
        }

        /* 新增：心跳动画 */
        @keyframes heartBeat {
            0%, 100% {
                transform: scale(1);
                filter: brightness(1) saturate(1);
                text-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
            }
            14% {
                transform: scale(1.15);
                filter: brightness(1.2) saturate(1.3);
                text-shadow: 0 0 20px rgba(255, 105, 180, 0.6);
            }
            28% {
                transform: scale(1);
                filter: brightness(1) saturate(1);
                text-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
            }
            42% {
                transform: scale(1.15);
                filter: brightness(1.2) saturate(1.3);
                text-shadow: 0 0 20px rgba(255, 105, 180, 0.6);
            }
            70% {
                transform: scale(1);
                filter: brightness(1) saturate(1);
                text-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
            }
        }

        .voice-status-text {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 10px;
        }

        .voice-subtitle {
            font-size: 14px;
            opacity: 0.8;
            margin-bottom: 20px;
        }

        /* 音量指示器 */
        .volume-indicator {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            height: 30px;
            gap: 3px;
            margin-top: 15px;
        }

        .volume-bar {
            width: 4px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 2px;
            transition: height 0.1s ease;
            min-height: 8px;
        }

        .volume-bar.active {
            background: white;
            animation: volumePulse 0.5s ease-in-out infinite alternate;
        }

        @keyframes volumePulse {
            0% {
                transform: scaleY(1);
            }
            100% {
                transform: scaleY(1.2);
            }
        }

        /* 处理中状态 */
        .voice-processing {
            font-size: 16px;
            margin-top: 10px;
        }

        .processing-dots {
            display: inline-block;
            animation: processingDots 1.5s infinite;
        }

        @keyframes processingDots {
            0%, 20% {
                content: '';
            }
            40% {
                content: '.';
            }
            60% {
                content: '..';
            }
            80%, 100% {
                content: '...';
            }
        }

        /* 错误状态 */
        .voice-error {
            color: #ff6b6b;
            background: rgba(255, 107, 107, 0.1);
            padding: 10px;
            border-radius: 10px;
            margin-top: 15px;
            font-size: 14px;
        }

        /* 成功状态 */
        .voice-success {
            color: #4ecdc4;
            background: rgba(78, 205, 196, 0.1);
            padding: 10px;
            border-radius: 10px;
            margin-top: 15px;
            font-size: 14px;
        }
        
        /* 调试面板样式 */
        .debug-panel {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.85);
            color: #fff;
            padding: 12px 15px;
            border-radius: 8px;
            font-size: 12px;
            z-index: 10000;
            min-width: 250px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .debug-panel.hidden {
            display: none;
        }
        
        .debug-title {
            font-weight: bold;
            font-size: 13px;
            margin-bottom: 8px;
            color: #4ecdc4;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 5px;
        }
        
        .debug-item {
            margin: 6px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .debug-label {
            color: #aaa;
            margin-right: 10px;
        }
        
        .debug-value {
            font-weight: 500;
            word-break: break-all;
            text-align: right;
            flex: 1;
        }
        
        .debug-value.real-data {
            color: #4ecdc4;
        }
        
        .debug-value.mock-data {
            color: #ff6b6b;
        }
        
        .debug-toggle {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 11px;
            cursor: pointer;
            z-index: 10001;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        .debug-toggle:hover {
            background: rgba(0, 0, 0, 0.9);
        }
        
        /* AI生成标识样式 */
        .ai-generated-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(8px);
            border-radius: 20px;
            font-size: 12px;
            color: #666;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.4s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .content-area.visible .ai-generated-badge {
            opacity: 1;
            transform: translateY(0);
        }
        
        .ai-badge-icon {
            font-size: 14px;
            margin-right: 6px;
            opacity: 0.8;
        }
        
        .ai-badge-text {
            font-weight: 400;
            letter-spacing: 0.3px;
        }
        
        /* 敏感词提醒弹窗样式 */
        .forbidden-alert-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            animation: fadeIn 0.3s ease;
        }
        
        .forbidden-alert-overlay.active {
            display: flex;
        }
        
        .forbidden-alert-box {
            background: white;
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            max-width: 320px;
            width: 85%;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            animation: slideInUp 0.4s ease-out;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .forbidden-alert-icon {
            font-size: 48px;
            margin-bottom: 15px;
            animation: shake 0.5s ease;
        }
        
        @keyframes shake {
            0%, 100% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(-10px);
            }
            75% {
                transform: translateX(10px);
            }
        }
        
        .forbidden-alert-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .forbidden-alert-message {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 20px;
        }
        
        .forbidden-alert-btn {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 12px 30px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        }
        
        .forbidden-alert-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
        }
        
        .forbidden-alert-btn:active {
            transform: translateY(0);
        }
        
    </style>
</head>
<body>
    <!-- 音频识别覆盖层 -->
    <div id="voiceRecognitionOverlay" class="voice-recognition-overlay">
        <div class="voice-recognition-box">
            <div class="voice-icon-container">
                <div class="voice-icon">
                    ♥️
                </div>
            </div>
            <div id="voiceStatusText" class="voice-status-text">正在处理语音...</div>
            <div id="voiceSubtitle" class="voice-subtitle">AI正在识别您的语音内容</div>
            
            <div id="voiceProcessing" class="voice-processing">
                处理中<span class="processing-dots"></span>
            </div>
            
            <div id="voiceError" class="voice-error" style="display: none;"></div>
        </div>
    </div>

    <div id="app" class="container">

        <div class="background-animation">
            <!-- 动态生成的浮动球体 -->
        </div>

        <!-- 敏感词提醒弹窗 -->
        <div class="forbidden-alert-overlay" :class="{ 'active': showForbiddenAlert }" @click="closeForbiddenAlert">
            <div class="forbidden-alert-box" @click.stop>
                <div class="forbidden-alert-icon">🚫</div>
                <div class="forbidden-alert-title">内容违规提醒</div>
                <div class="forbidden-alert-message">{{ forbiddenAlertMessage }}</div>
                <button class="forbidden-alert-btn" @click="closeForbiddenAlert">我知道了</button>
            </div>
        </div>

<!-- 搜索区域 -->
<div class="search-container" :class="{ 'active': isSearchActive }">
                    <!-- Logo区域 -->
                    <div class="logo-container" :class="{ 'hidden': isSearchActive }">
                        <img src="./img/title.png" alt="Logo">
                    </div>
    <div class="search-bar">
        <img src="./img/sousuo.png" class="search-icon" alt="搜索">
        <input 
            type="text" 
            class="search-input" 
            id="searchInput"
            v-model="searchText" 
            placeholder="找找附近的活动"
            @focus="activateSearch"
            @keyup.enter="search"
        >
    </div>
</div>

<!-- AI提示区域 -->
<div class="ai-tips" v-show="!showContent">
    <div class="ai-tips-icon">🤖</div>
    <div class="ai-tips-content">
        <div class="ai-tips-title">AI小助手提示</div>
        <div class="ai-tips-text">{{ currentTip }}</div>
    </div>
</div>

<!-- 热搜词条 -->
<div class="hot-keywords" v-show="!showContent">
    <div class="keywords-container">
        <div class="keyword" v-for="(keyword, index) in hotKeywords" :key="index" 
             :style="{'animation-delay': (index * 0.1) + 's'}"
             @click="useKeyword(keyword)">
            {{ keyword }}
        </div>
    </div>
</div>
        
        <!-- 加载动画
        <div class="loading" :class="{ 'visible': isLoading }">
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
        </div> -->


                <!-- 加载动画 -->
                <div class="loading-box" :class="{ 'visible': isLoading }">
                    <div class="loading-icon">🧠</div>
                    <div class="loading-text-container">
                        <transition name="fade-slide" mode="out-in">
                            <p :key="currentLoadingText" class="loading-text">{{ currentLoadingText }}</p>
                        </transition>
                    </div>
                </div>
        
        <!-- 内容区域 -->
        <div class="content-area" :class="{ 'visible': showContent }">
            <!-- AI生成标识 -->
            <div class="ai-generated-badge" v-if="showContent">
                <span class="ai-badge-icon">✨</span>
                <span class="ai-badge-text">本内容由AI生成，请注意甄别</span>
            </div>
            <!-- 描述信息 -->
            <div class="description" v-if="description">
                <!-- 思考状态指示器 -->
                <div class="thinking-indicator" v-if="isThinking">
                    <div class="thinking-icon">
                        <span class="thinking-emoji">🤔</span>
                        <div class="thinking-dots">
                            <span class="dot"></span>
                            <span class="dot"></span>
                            <span class="dot"></span>
                        </div>
                    </div>
                    <div class="thinking-stage">
                        <span v-if="thinkingStage === 'analyzing'">正在分析您的需求...</span>
                        <span v-else-if="thinkingStage === 'recommending'">正在为您精心挑选...</span>
                        <span v-else>思考完成</span>
                    </div>
                </div>
                <!-- AI思考内容实时显示 -->
                <div class="ai-thinking-content" v-if="isThinking && description">
                    <div class="thinking-bubble">
                        <div class="bubble-header">
                            <span class="ai-icon">🧠</span>
                            <span class="ai-label">AI思考中</span>
                        </div>
                        <div class="thinking-text">{{ description }}</div>
                    </div>
                </div>
                <!-- 最终描述 -->
                <div class="final-description" v-if="!isThinking && description">
                    <p>{{ description }}</p>
                </div>
            </div>
                        <!-- 智能推荐 -->
                        <div v-if="recommendations.length > 0">
                            <div class="section-title">智能推荐</div>
                            <div
                                class="food-item"
                                v-for="(item, index) in recommendations"
                                :key="'rec-'+index"
                                :class="{ 'visible': visibleRecommendations.includes(index) }"
                                @click="item.类型 === '活动' ? openactivities(item) : (item.类型 === '评论' ? opencomments(item) : openDetail(item))"
                            >
                                <img :src="item.image" @error="imageError" class="food-image" alt="推荐图片">
                                <div class="food-info">
                                    <div class="food-title">{{ item.title }}</div>
                                    <!-- 修改：使用 Content 字段作为详情 -->
                                    <div class="food-details" v-if="item.Content">{{ truncateText(item.Content, 50) }}</div>
                                    <!-- 添加：显示位置和时间 -->
                                    <!-- <div class="food-location" v-if="item.Location">
                                        <span class="location-icon">📍</span>
                                        <span>{{ truncateText(item.Location, 20) }}</span>
                                    </div>
                                    <div class="food-time" v-if="item.Time">
                                        <span class="time-icon">🕒</span>
                                        <span>{{ item.Time }}</span>
                                    </div> -->
                                    <div>
                                        <span class="food-tag" v-for="tag in item.tags" :key="tag">{{ tag }}</span>
                                    </div>
                                    <div class="food-author">
                                        <img :src="item.author.avatar" @error="imageError" class="author-avatar" alt="作者头像">
                                        <span class="author-name">{{ item.author.name }}</span>
                                    </div>
                                </div>
                                <span class="activity-tag" v-if="item.activityTag">{{ item.activityTag }}</span>
                                <span class="rating" v-if="item.rating">{{ item.rating }}/10</span>
                            </div>
                        </div>
            
                        <!-- 搜索结果 -->
                        <div v-if="searchResults.length > 0">
                            <div class="section-title">搜索结果</div>
                            <div
                                class="food-item"
                                v-for="(item, index) in searchResults"
                                :key="'search-'+index"
                                :class="{ 'visible': visibleSearchResults.includes(index) }"
                                @click="item.类型 === '活动' ? openactivities(item) : (item.类型 === '评论' ? opencomments(item) : openDetail(item))"
                            >
                                <img :src="item.image" @error="imageError" class="food-image" alt="结果图片">
                                <div class="food-info">
                                    <div class="food-title">{{ item.title }}</div>
                                    <!-- 修改：使用 Content 字段作为详情 -->
                                    <div class="food-details" v-if="item.Content">{{ truncateText(item.Content, 50) }}</div>
                                    <!-- 添加：显示位置和时间 -->
                                    <!-- <div class="food-location" v-if="item.Location">
                                        <span class="location-icon">📍</span>
                                        <span>{{ truncateText(item.Location, 20) }}</span>
                                    </div>
                                    <div class="food-time" v-if="item.Time">
                                        <span class="time-icon">🕒</span>
                                        <span>{{ item.Time }}</span>
                                    </div> -->
                                    <div>
                                        <span class="food-tag" v-for="tag in item.tags" :key="tag">{{ tag }}</span>
                                    </div>
                                    <div class="food-author">
                                        <img :src="item.author.avatar" @error="imageError" class="author-avatar" alt="作者头像">
                                        <span class="author-name">{{ item.author.name }}</span>
                                    </div>
                                </div>
                                <span class="activity-tag" v-if="item.activityTag">{{ item.activityTag }}</span>
                                <span class="rating" v-if="item.rating">{{ item.rating }}/10</span>
                            </div>
                        </div>
            

        </div>
    </div>

    <script>
        // 音频识别相关的全局变量和函数
        let voiceRecognitionActive = false;
        
        // 音频识别服务器地址
        const serverUrl = 'http://visionsic.com:1131';
        
        // 显示音频识别界面
        function showVoiceRecognition() {
            const overlay = document.getElementById('voiceRecognitionOverlay');
            const statusText = document.getElementById('voiceStatusText');
            const subtitle = document.getElementById('voiceSubtitle');
            const processing = document.getElementById('voiceProcessing');
            const error = document.getElementById('voiceError');
            
            // 重置状态
            statusText.textContent = '正在处理语音...';
            subtitle.textContent = 'AI正在识别您的语音内容';
            processing.style.display = 'block';
            error.style.display = 'none';
            
            overlay.classList.add('active');
            voiceRecognitionActive = true;
        }
        
        // 隐藏音频识别界面
        function hideVoiceRecognition() {
            const overlay = document.getElementById('voiceRecognitionOverlay');
            overlay.classList.remove('active');
            voiceRecognitionActive = false;
        }
        
        // 更新识别状态
        function updateVoiceStatus(status, subtitle = '', isError = false) {
            const statusText = document.getElementById('voiceStatusText');
            const subtitleText = document.getElementById('voiceSubtitle');
            const processing = document.getElementById('voiceProcessing');
            const error = document.getElementById('voiceError');
            
            statusText.textContent = status;
            if (subtitle) {
                subtitleText.textContent = subtitle;
            }
            
            if (isError) {
                processing.style.display = 'none';
                error.textContent = status;
                error.style.display = 'block';
            } else {
                processing.style.display = 'block';
                error.style.display = 'none';
            }
        }
        
        // 主要的音频处理函数（供Android调用）
        async function processAudioFromBase64(audioData) {
            try {
                // 显示识别界面
                showVoiceRecognition();
                
                let audioBlob;
                
                // 处理base64数据
                if (audioData) {
                    let base64Data = audioData;
                    
                    // 如果包含data:前缀，则移除它
                    if (base64Data.startsWith('data:')) {
                        base64Data = base64Data.split(',')[1];
                    }
                    
                    // 将base64转换为二进制数据
                    const binaryString = window.atob(base64Data);
                    const bytes = new Uint8Array(binaryString.length);
                    for (let i = 0; i < binaryString.length; i++) {
                        bytes[i] = binaryString.charCodeAt(i);
                    }
                    
                    // 创建音频blob
                    audioBlob = new Blob([bytes], { 
                        type: 'audio/webm;codecs=opus' 
                    });
                } else {
                    throw new Error('未提供音频数据');
                }
                
                // 发送到服务器
                const formData = new FormData();
                formData.append('audio_file', audioBlob, 'recording.webm');
                formData.append('language', 'auto');
                
                updateVoiceStatus('正在识别语音...', '连接AI语音识别服务');
                
                const response = await fetch(`${serverUrl}/transcribe`, {
                    method: 'POST',
                    mode: 'cors', // 🔥 明确指定CORS模式
                    credentials: 'omit', // 🔥 不发送凭据，避免跨域问题
                    body: formData
                });
                
                if (response.ok) {
                    const result = await response.json();
                    if (result.success && result.text) {
                        const recognizedText = result.text.trim();
                        
                        // 立即填充到搜索框并触发搜索，不显示结果
                        const searchInput = document.getElementById('searchInput');
                        if (searchInput) {
                            searchInput.value = recognizedText;
                            // 触发Vue的数据更新
                            if (window.app && window.app.$data) {
                                window.app.$data.searchText = recognizedText;
                            }
                        }
                        
                        // 立即隐藏识别界面
                        hideVoiceRecognition();
                        
                        // 🔥 关键修复：先强制中断当前检索并重置状态，再开始新搜索
                        if (window.app) {
                            console.log('🔄 语音输入：强制中断当前检索并重置状态');
                            
                            // 强制重置所有搜索相关状态
                            window.app.isLoading = false;
                            window.app.isThinking = false;
                            window.app.thinkingStage = '';
                            
                            // 停止当前的加载动画
                            if (window.app.stopLoadingAnimation) {
                                window.app.stopLoadingAnimation();
                            }
                            
                            // 激活搜索状态并开始新的搜索
                            if (window.app.activateSearch && window.app.search) {
                                window.app.activateSearch();
                                window.app.search();
                                console.log('✅ 语音输入：已启动新的AI检索');
                            }
                        }
                        
                        return {
                            success: true,
                            text: recognizedText
                        };
                    } else {
                        throw new Error(result.error || '识别失败，请重试');
                    }
                } else {
                    const errorText = await response.text();
                    throw new Error(`服务器错误: ${response.status} - ${errorText}`);
                }
                
            } catch (error) {
                console.error('音频识别错误:', error);
                
                // 显示错误状态
                updateVoiceStatus('识别失败', error.message, true);
                
                // 2秒后自动隐藏
                setTimeout(() => {
                    hideVoiceRecognition();
                }, 2000);
                
                return {
                    success: false,
                    error: error.message
                };
            }
        }
        
        // 为了兼容性，也提供一个不带Base64的函数名
        window.processAudio = processAudioFromBase64;
        window.processAudioFromBase64 = processAudioFromBase64;
        
        // 测试函数（可选，用于调试）
        window.testVoiceRecognition = function() {
            showVoiceRecognition();
            
            // 模拟识别过程
            setTimeout(() => {
                const searchInput = document.getElementById('searchInput');
                if (searchInput) {
                    searchInput.value = '我想吃火锅';
                    if (window.app && window.app.$data) {
                        window.app.$data.searchText = '我想吃火锅';
                    }
                }
                hideVoiceRecognition();
                
                // 🔥 测试函数也使用相同的中断和重置逻辑
                if (window.app) {
                    console.log('🧪 测试模式：强制中断当前检索并重置状态');
                    
                    // 强制重置所有搜索相关状态
                    window.app.isLoading = false;
                    window.app.isThinking = false;
                    window.app.thinkingStage = '';
                    
                    // 停止当前的加载动画
                    if (window.app.stopLoadingAnimation) {
                        window.app.stopLoadingAnimation();
                    }
                    
                    // 激活搜索状态并开始新的搜索
                    if (window.app.activateSearch && window.app.search) {
                        window.app.activateSearch();
                        window.app.search();
                        console.log('✅ 测试模式：已启动新的AI检索');
                    }
                }
            }, 1000);
        };
    </script>
    
    <!-- 🔥 关键修复：在body底部加载sousuo.js，确保DOM完全准备好 -->
    <script src="./js/sousuo.js"></script>
    <script>
        // 🔍 调试：检查Vue app是否创建成功
        setTimeout(function() {
            if (typeof window.app === 'undefined') {
                console.error('❌ Vue app 实例未创建！sousuo.js 可能加载失败');
                document.body.innerHTML = '<div style="padding: 20px; color: red; font-size: 18px; text-align: center;">' +
                    '<h2>❌ Vue app 实例创建失败</h2>' +
                    '<p>sousuo.js 文件可能加载失败</p>' +
                    '<p>请检查 assets/ai-html/js/sousuo.js 是否存在</p>' +
                    '<p>或检查浏览器控制台的错误信息</p>' +
                    '</div>';
            } else if (!window.app._isMounted) {
                console.warn('⚠️ Vue app 已创建但未挂载');
            } else {
                console.log('✅ Vue app 运行正常');
            }
        }, 1000); // 等待1秒钟确保初始化完成
    </script>
</body>
</html>
